<template>
            <div class="noticeContainer"> 
                <div class="noticeHeader">
                    <span>系统公告</span>
                </div>
                <div class="noticeItem" v-for="notice in noticeList" :key="notice.nid" >
                    <div class="title" @click="showNoticeContent(notice)">{{notice.title}}</div>
                </div>
                <!-- 公告对话框 -->
               <el-dialog
                  :title="noticeInfo.title"
                  :visible.sync="dialogVisible"
                  width="30%"
                  > 
                  <h1 class="dateTime">发布时间:{{noticeInfo.dateTime}}</h1>
                  <span >{{noticeInfo.content}}</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                  </span>
                </el-dialog>
            </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
       noticeList:[],      
       dialogVisible:false,
       noticeInfo:{ },
    }
  },
  computed:{
    ...mapGetters({noticeListData:'noticeList'}),
  },
  methods: {
    // 获取公告信息
    getNoticeList(){
      this.$store.dispatch('getNoticeData').then(ok=>{
        if(ok){
          this.noticeList = this.noticeListData;
        }
      })
    },
    showNoticeContent(notice){
      this.noticeInfo = notice;
      this.dialogVisible = true;
    }
  },
  created() {
    // 获取公告信息
    this.getNoticeList();
  },
}
</script>

<style scoped lang="less">
.noticeContainer{
     background: rgb(244, 251, 252);
     width: 300px;
     height: 420px;
     border-radius: 5px;
     border-bottom: 2px solid rgb(187, 186, 186);
     .noticeHeader{
       background: rgb(136, 171, 195);
       height: 30px;
       font-size: 17px;
       text-align: center;
       font-weight: 600;
       line-height:30px;
       border-radius: 4px 4px 0px 0px;
       color: rgb(225, 238, 239);
       box-shadow: 0 2px 2px  rgba(144, 141, 141, 0.4);
       border-bottom: 1px solid rgb(226, 226, 226);
     }  
     .noticeItem{
          height: 30px;
          border-bottom: 1px solid #ddd;
          line-height: 30px;
          border-radius: 5px;
          cursor: pointer;
          .title{
              color: rgb(95, 170, 220);
              padding-left: 4px;
          }
          transition: all 0.2s ease 0s;
     }
     .noticeItem:hover{
       background: rgb(188, 193, 194);
        .title{
              color: rgb(255, 255, 255);
              padding-left: 4px;
        }
     }
    .dateTime{
      font-size: 1em;
      font-weight: 500;
      text-align: center;
      color: rgb(45, 198, 233);
    }
  }
</style>